import React from 'react';
import { Input, Button, List } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
import './style.css';

// 当一个组件只有render函数的时候可以写成无状态组件
const TodoItemUI = (props) => {
	const { inputValue, list, handleInputChange, handleKeyUpItemAdd, handleItemAdd, handleItemDelete} = props;
	return (
		<div className="todolist-page">
			<Input
				value={inputValue}
				className="todo-input"
				onChange={handleInputChange}
				onKeyUp={handleKeyUpItemAdd}
			/>
			<Button type="primary" className="todo-btn" onClick={handleItemAdd}>添加</Button>
			<List
				className="todo-list"
				bordered
				dataSource={list}
				renderItem={(item, index) => (
					<List.Item
						actions={
							[<DeleteOutlined 
								style={{ fontSize: '18px', color: '#f45656' }}
								onClick={() => handleItemDelete(index)}
							/>]
						}
					>
						{item}
					</List.Item>
				)}
			/>
		</div>
	)
}

// class TodoItemUI extends Component {
// 	render() {
// 		const { inputValue, list, handleInputChange, handleItemAdd, handleItemDelete} = this.props;
// 		return (
// 			<div className="todolist-page">
// 				<Input
// 					value={inputValue}
// 					className="todo-input"
// 					onChange={handleInputChange}
// 				/>
// 				<Button type="primary" className="todo-btn" onClick={handleItemAdd}>添加</Button>
// 				<List
// 					className="todo-list"
// 					bordered
// 					dataSource={list}
// 					renderItem={(item, index) => (<List.Item onClick={() => handleItemDelete(index)}>{item}</List.Item>)}
// 				/>
// 			</div>
// 		)
// 	}
// }

export default TodoItemUI;